<template>
	<view class="box">
		<block v-if="!load">
			<view class="notapply" v-if="user.aid == 0">
				<navtop :back="true" title="代理分销"></navtop>
				<view class="topbj"><image :src="user.agent_pic" mode="widthFix"></image></view>
				<view class="hint">
					<view class="title">申请代理合作</view>
					<view class="text">
						<view class="p" v-for="(item,index) in user.agent_tarr" :key="index">{{item}}</view>
					</view>
				</view>
				<view class="btn" @click="get_btn()"><text v-if="user.rmb > 0">{{user.rmb}}元</text><text v-else>免费</text>申请代理</view>
			</view>
			<view class="applied" v-else>
				<navtop title="show"></navtop>
				<view style="height:356rpx;"></view>
				<view class="topf">
					<navtop :back="true" title="代理分销"></navtop>
					<!-- 我的钱包 -->
					<view class="purse">
						<view class="earnings">
							<!-- 总收益 -->
							<view class="always">
								<view class="name">总收益（元）</view>
								<view class="unm">{{user.urmb}}元</view>
							</view>
							<!-- 今昨收益 -->
							<view class="type">
								<view class="tags">今日收益：{{user.jrmb}}元</view>
								<view class="tags">昨日收益：{{user.zrmb}}元</view>
							</view>
						</view>
						<view class="btnbox">
							<view class="btn" @click="get_link('user/withdraw')">立即提现</view>
							<view class="btn on" @click="get_lnvite()">邀请好友</view>
						</view>
					</view>
					<view class="tabbox">
						<view class="tab" :class="{on:tindex == 1}" @click="get_tab(1)">邀请记录</view>
						<view class="tab" :class="{on:tindex == 2}" @click="get_tab(2)">收益记录</view>
						<view class="tab" :class="{on:tindex == 3}" @click="get_tab(3)">提现记录</view>
					</view>
				</view>
				<view class="tlist">
					<view class="yul">
						<view class="li" v-for="(item,index) in list" :key="index">
							<block v-if="tindex==1">
								<view class="name">{{item.name}}</view>
								<view class="time">{{item.addtime}}</view>
							</block>
							<block v-else>
								<view class="left">
									<view class="name">{{item.name}}</view>
									<view class="time">{{item.addtime}}</view>
								</view>
								<view class="rmb num" v-if="tindex==2">+{{item.rmb}}元</view>
								<view v-if="tindex==3" class="rmb" :class="{ok:item.pid==1,msg:item.pid==2}">
									<view class="num">{{item.rmb}}元</view>
									<view v-if="item.pid==0">处理中</view>
									<view v-if="item.pid==1">提现完成</view>
									<view v-if="item.pid==2" @click="get_lose(item.msg)">
										<uni-icons type="help" size="14" color="f00"></uni-icons>提现失败
									</view>
								</view>
							</block>
						</view>
					</view>
					<loading :type="1" :load="pageload" :nums="list.length"></loading>
				</view>
				<view class="safearea-bottom"></view>
				<view class="safearea-bottom-fixed"></view>
			</view>
		</block>
		<loading v-else :load="true"></loading>
		<view class="popup" v-if="lose">
			<view class="losebox">
				<view class="title">失败原因</view>
				<view class="text">{{msg}}</view>
				<view class="btn" @click="lose=false">关闭</view>
			</view>
		</view>
		<view class="popup" v-if="lnvite">
			<view class="lnvite">
				<view class="title">邀请好友</view>
				<view class="img"><image :src="user.share_pic" mode="widthFix"></image></view>
				<view class="text" @click="get_copy()">我的邀请码：{{user.lnvite_code}} <text>复制</text></view>
				<view class="btnbox">
					<view class="btn" @click="get_share()">
						立即分享
						<!-- #ifdef MP-WEIXIN -->
						<button class="share" plain open-type="share"></button>
						<!-- #endif -->
					</view>
					<view class="btn on" @click="get_down()">保存推广海报</view>
				</view>
				<view class="close" @click="lnvite=false"><uni-icons type="closeempty" size="20" color="#333"></uni-icons></view>
			</view>
		</view>
		<view class="popup" v-if="payshow">
			<view class="payment">
				<view class="title">
					<view class="h2">选择支付方式</view>
					<view class="close" @click="payshow=false"><image src="../../static/img/user/close.png" mode="aspectFill"></image></view>
				</view>
				<view class="rmb">￥{{user.rmb}}</view>
				<!-- #ifndef MP-WEIXIN -->
				<view class="ul">
					<view v-if="user.iswxpay" class="li" @click="get_pay_type('wxpay')">
						<image class="icon" src="../../static/img/user/wxpay.png"></image>
						<text>微信支付</text>
						<view class="right">
							<image class="img" v-if="paytype=='wxpay'" src="../../static/img/user/select.png"></image>
							<text v-else></text>
						</view>
					</view>
					<view v-if="user.isalipay" class="li" @click="get_pay_type('alipay')">
						<image class="icon" src="../../static/img/user/alipay.png"></image>
						<text>支付宝</text>
						<view class="right">
							<image class="img" v-if="paytype=='alipay'" src="../../static/img/user/select.png"></image>
							<text v-else></text>
						</view>
					</view>
				</view>
				<!-- #endif -->
				<view class="btnbox">
					<view class="btn" @click="get_pay_btn()">确定开通</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let that = null;
	export default {
		data() {
			return {
				load: true,
				tindex: 1,
				lose: false,
				lnvite: false,
				msg: '',
				share_url: '',
				share_pic: '',
				page: 1,
				pageload: true,
				list: [],
				user: {
					aid: 0,
					cfee: 70,
					rmb: '0.00',
					urmb: '0.00',
					jrmb: '0.00',
					zrmb: '0.00',
					share_url: '',
					share_pic: '',
					lnvite_code: '',
					iswxpay: true,
					isalipay: false,
				},
				share: {
					title: '',
					path: '/pages/index/index',
					imageUrl: ''
				},
				payshow: false,
				paytype: 'wxpay'
			}
		},
		onLoad(e){
		    that = this;
			that.get_data();
		},
		methods: {
			get_link(url){
				uni.navigateTo({
					url: '../'+url
				});
			},
			get_tab(index){
				that.tindex = index;
				that.page = 1;
				that.pageload = true;
				that.list = [];
				that.get_list();
			},
			get_lose(msg){
				that.msg = msg;
				that.lose = true;
			},
			get_lnvite(){
				that.lnvite = true;
			},
			get_data(){
				that.http.get_curl('user/agent',{},function(res){
					that.load = false;
					if(res.code == 1){
						that.user = res.data;
						that.share = {
							title: '',
							path: '/pages/index/index?lnvite_code='+that.user.lnvite_code,
							imageUrl: that.user.share_pic
						};
						if(that.user.aid == 1) that.get_list();
						if(!that.user.iswxpay) that.paytype = 'alipay';
					}
				});
			},
			get_list(){
				let uri = 'user/lnvite';
				if(that.tindex == 2) uri = 'user/income';
				if(that.tindex == 3) uri = 'withdraw/lists';
				that.http.get_curl(uri,{page:that.page},function(res){
					if(res.code == 1){
						that.pageload = res.data.pageload;
						if(that.page == 1){
							that.list = res.data.list;
						}else{
							that.list = that.list.concat(res.data.list);
						}
					}
				});
			},
			get_btn(){
				let weixin = false;
				// #ifdef H5
				weixin = String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
				// #endif
				// #ifdef MP-WEIXIN
				weixin = true;
				// #endif
				if(that.user.rmb == 0 || weixin){
					that.get_pay_btn();
				}else{
					that.payshow = true;
				}
			},
			get_pay_type(type){
				that.paytype = type;
			},
			get_pay_btn(wxcode){
				uni.showLoading({title:'请求中'});
				that.http.get_curl('user/agent_save',{type:that.paytype,wxcode:wxcode},function(res){
					uni.hideLoading();
					if(res.code == 1){
						uni.showToast({
							title: '申请成功'
						});
						that.get_data();
					}else if(res.code == 2){
						that.http.get_pay(that.paytype,res.data,function(state){
							if(state == 'ok'){
								uni.showToast({title: '付款成功'});
								that.get_data();
							}
						});
					}else if(res.code == 3){
						//需要获取openid
						uni.showToast({title: '当前无法支付，请重新登录',icon:'none'});
						uni.removeStorageSync('user_token');
						setTimeout(()=>{
							uni.switchTab({
								url: '../user/index'
							});
						},500);
					}
				});
			},
			get_share(){
				// #ifdef H5
				uni.setClipboardData({
					data: that.user.share_url,
					success: function () {
						uni.showToast({
							title: '分享地址已复制',
							icon: 'none'
						});
					}
				});
				// #endif
				// #ifdef APP-PLUS
				uni.shareWithSystem({
					type: "image",
					summary: "分享一个好玩的情侣游戏给你，地址：\r\n"+that.user.share_url,
					href: that.user.share_url,
					imageUrl: that.user.share_pic
				});
				// #endif
			},
			get_copy(){
				uni.setClipboardData({
					data: that.user.lnvite_code+'',
					success: function () {
						uni.showToast({
							title: '已复制'
						});
					}
				});
			},
			// #ifdef H5
			get_down(){
				var filename; //图片名称
				var filetype; //图片类型
				var path = that.user.share_pic;
				if (path.indexOf("/") > 0) {
					var file = path.substring(path.lastIndexOf("/") + 1, path.length);
					var fileArr = file.toLowerCase().split(".");
					filename = fileArr[0];
					filetype = fileArr[1];
				}
				let image = new Image();
				image.setAttribute("crossOrigin", "anonymous");
				image.crossOrigin = '*';  // 解决跨域
				image.onload = function () {
					let canvas = document.createElement("canvas");
					canvas.width = image.width;
					canvas.height = image.height;
					let context = canvas.getContext("2d");
					context.drawImage(image, 0, 0, image.width, image.height);
					let img = canvas.toDataURL(`image/${filetype}`); //得到图片的base64编码数据
					let a = document.createElement("a"); // 生成一个a元素
					let event = new MouseEvent("click"); // 创建一个单击事件
					a.download = filename; // 设置图片名称，-------------你传递的图片名称
					a.href = img  // 将生成的URL设置为a.href属性
					a.dispatchEvent(event); // 触发a的单击事件
				};
				image.src = path + '?v=' + Math.random();// 防止缓存
			}
			// #endif
			// #ifndef H5
			get_down(){
				uni.showLoading({title: '保存中'});
				uni.downloadFile({
					url: that.user.share_pic,
					success: function (res) {
						if(res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function (){
									uni.hideLoading();
									uni.showToast({
										title: '已保存'
									});
								},
								fail: function (e) {
									uni.hideLoading();
									uni.showToast({
										title: '图片保存失败',
										icon: 'none'
									});
								}
							});
						}
					},
					fail: function (e) {
						uni.hideLoading();
						uni.showToast({
							title: '图片下载失败',
							icon: 'none'
						});
					}
				});
			}
			// #endif
		} 
	}
</script>

<style lang="scss">
	page{background: #fff;}
	.box{width: 100%;background: #fff;min-height: 100%;}
	.topf{width: 100%;max-width: 1000rpx;position: fixed;top: 0;left: 50%;transform: translateX(-50%);z-index: 998;background: #fff;}
	.notapply{
		.topbj{width: 100%;height: auto;
			image{width: 100%;height: auto;}
		}
		.hint{padding: 32rpx;
			.title{width: 100%;font-size: 34rpx;color: #333;font-weight: 600;text-align: center;padding-bottom: 20rpx;}
			.p{font-size: 28rpx;color: #333;text-indent: 2em;padding-bottom: 10rpx;}
		}
		.btn{width: 300rpx;margin: 0 auto;line-height: 80rpx;border-radius: 10rpx;text-align: center;background: #3788E0;font-size: 28rpx;color: #fff;}
	}
	.applied{
		.purse{padding: 32rpx;height: 200rpx;border-bottom: 20rpx solid #f8f8f8;display: flex;justify-content: space-between;align-items: center;
			.earnings{width: calc(100% - 240rpx);
				.always{width: 100%;
					.name{font-size: 28rpx;color: #999;}
					.unm{font-size: 50rpx;color: #333;padding-top: 10rpx;}
				}
				.type{padding-top: 10rpx;
					.tags{font-size: 24rpx;color: #999;width: 100%;padding-top: 6rpx;}
				}
			}
			.btnbox{width: 220rpx;
				.btn{width: 100%;height: 70rpx;line-height: 70rpx;background: #3788E0;color: #fff;margin-top: 30rpx;text-align: center;font-size: 28rpx;border-radius: 10rpx;}
				.btn.on{background: linear-gradient(270deg, #fcae3a, #f15d25);margin-bottom: 0;}
			}
		}
		.tabbox{width: 100%;height: 80rpx;display: flex;justify-content: space-between;align-items: center;border-bottom: 4rpx solid #f8f8f8;
			.tab{width: 33.333%;text-align: center;font-size: 30rpx;color: #333;}
			.tab.on{color: #f15d25;font-weight: 600;}
		}
		.tlist{padding: 0 32rpx;height: 100%;
			.yul{width: 100%;height: 100%;}
			.li{width: 100%;min-height: 44rpx;padding: 26rpx 0;display: flex;justify-content: space-between;align-items: center;border-bottom: 2rpx solid #f5f5f5;font-size: 26rpx;color: #333;
				.time{color:#999;padding-top: 6rpx;}
				.rmb{text-align: right;font-size: 24rpx;color:#3788E0;}
				.rmb.ok{color: #008d11;}
				.rmb.msg{color: #f00;}
				.rmb.num{font-size: 30rpx;}
				.rmb .num{padding-bottom: 6rpx;font-size: 30rpx;}
			}
			.li:last-child{border: none;}
		}
	}
	.popup{width: 100%;height: 100vh;background: rgba(0,0,0,.5);position: fixed;top:0;left: 0;z-index: 999;
		.losebox{width: calc(100% - 64rpx);max-width: calc(1000rpx - 64rpx);padding: 30rpx 20rpx;box-sizing: border-box;background: #ffd7d7;border: 1rpx solid #fff;border-radius: 20rpx;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);
			.title{color: #333;text-align: center;font-weight: 600;font-size: 30rpx;padding-bottom: 30rpx;}
			.img{width: 80%;margin: 0 auto;min-height: 500rpx;background: #f9f9f9;
				image{
					width: 100%;
					height: auto;
				}
			}
			.text{font-size: 28rpx;text-align: center;padding: 40rpx 0;
				text{padding-left: 20rpx;text-decoration:underline;color: #999;}
			}
			.btn{width: 50%;height: 70rpx;line-height: 70rpx;color: #fff;text-align: center;background: linear-gradient(270deg, #fcae3a, #f15d25);margin: 20rpx auto;border-radius: 10rpx;}
			.close{
				position: absolute;
				top: 30rpx;
				right: 20rpx;
			}
		}
		.lnvite{width: calc(100% - 64rpx);max-width: calc(1000rpx - 64rpx);padding: 30rpx 20rpx;box-sizing: border-box;background: #fff;border-radius: 20rpx;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);
			.title{color: #333;text-align: center;font-weight: 600;font-size: 30rpx;padding-bottom: 30rpx;}
			.img{width: 70%;margin: 0 auto;text-align: center;min-height: 500rpx;background:#f5f5f5;
				image{width: 100%;height: auto;margin: 0 auto;}
			}
			.text{font-size: 28rpx;text-align: center;padding: 40rpx 0;
				text{padding-left: 20rpx;text-decoration:underline;color: #999;}
			}
			.btnbox{
				width: 100%;
				display: flex;
				.btn{width: 46%;height: 70rpx;line-height: 70rpx;color: #fff;text-align: center;background: #3788E0;margin: 20rpx auto;border-radius: 10rpx;position: relative;}
				.btn.on{background: linear-gradient(270deg, #fcae3a, #f15d25);}
				.share{position: absolute;top:0;left:0;width: 100%;height: 100%;z-index: 1;border: 0;}
			}
			.close{
				position: absolute;
				top: 30rpx;
				right: 32rpx;
			}
		}
		.payment{width: calc(100% - 64rpx);max-width: calc(1000rpx - 64rpx);background: #fff;border-radius: 10rpx;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);
			.title{width: 100%;height: 100rpx;position: relative;
				.h2{width: 100%;line-height: 100rpx;text-align: center;font-size: 30rpx;color: #333;}
				.close{position: absolute;top: 50%;right: 32rpx;transform: translateY(-50%);width: 40rpx;height: 40rpx;}
				image{width: 100%;height: 100%;}
			}
			.rmb{padding: 40rpx;text-align: center;font-size: 50rpx;font-weight: 500;}
			.ul{
				padding: 20rpx 30rpx;
				.li{
					width: 100%;position: relative;border-bottom: 2rpx solid #f8f8f8;line-height: 80rpx;padding: 10rpx 0;
					.icon{width: 40rpx;height: 40rpx;vertical-align: middle;margin-right: 20rpx;}
					text{font-size:28rpx;color:#333;vertical-align: middle;}
					.right{
						position: absolute;top:0;right:10rpx;z-index:9;line-height: 80rpx;
						text{display: inline-block;width: 36rpx;height: 36rpx;border: 2rpx solid #bbb;border-radius: 50%;}
						.img{width: 40rpx;height: 40rpx;margin-top: 30rpx;}
					}
				}
			}
			.btnbox{padding: 0 32rpx;display: flex;justify-content: space-between;
				.btn{width: 80%;height: 80rpx;margin: 32rpx auto;line-height: 80rpx;text-align: center;background: linear-gradient(270deg, #fcae3a, #f15d25);font-size: 28rpx;color: #fff;border-radius: 80rpx;}
			}
		}
	}
</style>